<template>
    <div class="view">
        <android-nav-bar title="我的单身团" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="all-top">
                <div class="total flex">
                    <div class="people-total">
                        <p class="tip">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-chinese"></use>
                            </svg>
                        </p>
                        <p class="num">{{maleNum}}人</p>
                    </div>
                    <div class="income-total">
                        <p class="tip">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-xinniang"></use>
                            </svg>
                        </p>
                        <p class="num">{{femaleNum}}人</p>
                    </div>
                </div>
            </div>
            <div class="all-bottom">
                <div class="content-box">
                    <cube-tab-bar v-model="selectedLabel"
                                  show-slider
                                  :use-transition="false"
                                  ref="tabNav"
                                  :data="tabs">
                    </cube-tab-bar>
                    <div class="tab-slide-container">
                        <cube-slide
                                ref="slide"
                                :loop="false"
                                :initial-index="initialIndex"
                                :auto-play="false"
                                :show-dots="false"
                                :options="slideOptions"
                                @change="changePage"
                                @scroll="scroll"
                        >
                            <!-- 关注 -->
                            <cube-slide-item>
                                <div class="none-fans" v-if="!male.length">
                                    暂无单身男性!
                                </div>
                                <cube-scroll class="scroll" v-if="male.length" ref="maleScroll"
                                             :data="male"
                                             :options="scrollOptions"
                                             @pulling-down="onPullingDown"
                                             @pulling-up="onPullingUp">
                                    <ul class="list-wrapper">
                                        <li v-for="(item, index) in male" class="list-item flex" :key="index" @click="toPage('singleInfo',{friendId:item.user_id})">
                                            <div class="avatar">
                                                <img :src="item.user.avatar&&item.user.avatar.file_status.status?item.user.avatar.file_path:filePath">
                                            </div>
                                            <div class="info">
                                                <div class="nickname ellipsis">{{item.user.nickName}}
                                                    <svg class="svg-icon huangguan" aria-hidden="true">
                                                        <use :xlink:href="item.user.gender==1?'#icon-chinese':item.user.gender==2?'#icon-xinniang':'#icon-nicheng'"></use>
                                                    </svg>
                                                </div>
                                                <div class="rank">{{item.user.rank_name}}
                                                    <svg class="svg-icon huangguan" aria-hidden="true">
                                                        <use :xlink:href="item.user.user_rank==1?'#icon-putong':item.user.user_rank==2?'#icon-VIPhuangguan':'#icon-huiyuan'"></use>
                                                    </svg>
                                                </div>
                                                <div class="factor ellipsis">
                                                    <span class="age" v-if="!(item.user.age=='未知'||item.user.age==0)">{{item.user.age+'岁'}}</span>
                                                    <!--                                                    <span class="height" v-if="item.user.user_info.SNAP_HEIGHT!=='未填写'">{{item.user.user_info.SNAP_HEIGHT}}</span>-->
                                                    <span class="home" v-if="!(item.user.snap_city_id=='未填写'||item.user.snap_city_id=='')">{{item.user.snap_city_id}}</span>
                                                </div>
                                                <div class="hobby ellipsis" v-if="item.user.user_info.SNAP_HOBBY!=='未填写'">
                                                    {{item.user.user_info.SNAP_HOBBY}}
                                                </div>
                                                <div class="intro ellipsis">{{item.user.user_info.INTRODUCTION}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </cube-scroll>
                            </cube-slide-item>
                            <!-- 推荐 -->
                            <cube-slide-item>
                                <div class="none-fans" v-if="!female.length">
                                    暂无单身女性!
                                </div>
                                <cube-scroll class="scroll" v-if="female.length" ref="femaleScroll"
                                             :data="female"
                                             :options="scrollOptions"
                                             @pulling-down="onPullingDown"
                                             @pulling-up="onPullingUp">
                                    <ul class="list-wrapper">
                                        <li v-for="(item, index) in female" class="list-item flex" :key="index" @click="toPage('singleInfo',{friendId:item.user_id})">
                                            <div class="avatar">
                                                <img :src="item.user.avatar&&item.user.avatar.file_status.status?item.user.avatar.file_path:filePath">
                                            </div>
                                            <div class="info">
                                                <div class="nickname ellipsis">{{item.user.nickName}}
                                                    <svg class="svg-icon huangguan" aria-hidden="true">
                                                        <use :xlink:href="item.user.gender==1?'#icon-chinese':item.user.gender==2?'#icon-xinniang':'#icon-nicheng'"></use>
                                                    </svg>
                                                </div>
                                                <div class="rank">{{item.user.rank_name}}
                                                    <svg class="svg-icon huangguan" aria-hidden="true">
                                                        <use :xlink:href="item.user.user_rank==1?'#icon-putong':item.user.user_rank==2?'#icon-VIPhuangguan':'#icon-huiyuan'"></use>
                                                    </svg>
                                                </div>
                                                <div class="factor ellipsis">
                                                    <span class="age" v-if="!(item.user.age=='未知'||item.user.age==0)">{{item.user.age+'岁'}}</span>
<!--                                                    <span class="height" v-if="item.user.user_info.SNAP_HEIGHT!=='未填写'">{{item.user.user_info.SNAP_HEIGHT}}</span>-->
                                                    <span class="home" v-if="!(item.user.snap_city_id=='未填写'||item.user.snap_city_id=='')">{{item.user.snap_city_id}}</span>
                                                </div>
                                                <div class="hobby ellipsis" v-if="item.user.user_info.SNAP_HOBBY!=='未填写'">
                                                    {{item.user.user_info.SNAP_HOBBY}}
                                                </div>
                                                <div class="intro ellipsis">{{item.user.user_info.INTRODUCTION}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </cube-scroll>
                            </cube-slide-item>
                        </cube-slide>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MatchmakerSingleGroup extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private filePath: string = require('@/assets/images/user-no-face.jpg');
        @State("UserStore")
        public user!: InterfaceUser;
        private selectedLabel:string = '男方';
        private male: any[] = [];
        private female: any[] = [];
        private maleNum: number = 0;
        private femaleNum: number = 0;
        private pageOne: number = 1;
        private pageTwo: number = 1;
        private isKeepAlive = true;

        private get tabs():Array<any>{
            return [
                {
                    label:'男方'
                },
                {
                    label:'女方'
                }
            ]
        }

        private get slideOptions(): any{
            return {
                listenScroll: true,
                probeType: 3,
                /* lock y-direction when scrolling horizontally and  vertically at the same time */
                directionLockThreshold: 0
            }
        }

        private get scrollOptions(): any{
            return {
                /* lock x-direction when scrolling horizontally and  vertically at the same time */
                directionLockThreshold: 0,
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            }
        }

        private findIndex(ary: Array<object>, fn: any): number {
            if (ary.findIndex) {
                return ary.findIndex(fn);
            }
            let index = -1;
            ary.some((item: Object, i: any, ary: Array<object>) => {
                const ret = fn.call(this, item, i, ary);
                if (ret) {
                    index = i;
                    return ret;
                }
            });
            return index;
        }

        private get initialIndex(): number {//cube-slide资料，匹配，动态滑动
            let index = 0;
            index = this.findIndex(this.tabs, (item: any) => item.label === this.selectedLabel);
            return index;
        }

        private changePage (current:number) {
            this.selectedLabel = this.tabs[current].label;
        }

        private scroll (pos:any) {
            const x = Math.abs(pos.x);
            const tabItemWidth = (this as any).$refs.tabNav.$el.clientWidth;
            const slideScrollerWidth = (this as any).$refs.slide.slide.scrollerWidth;
            const deltaX = x / slideScrollerWidth * tabItemWidth;
            (this as any).$refs.tabNav.setSliderTransform(deltaX);
        }

        private onPullingDown(): void {
            (this as any).$refs[this.selectedLabel=='男方'?'maleScroll':'femaleScroll'].forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.selectedLabel=='男方'?this.api.getMyMaleSingleList:this.api.getMyFemaleSingleList, {page: this.selectedLabel=='男方'?this.pageOne:this.pageTwo, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        console.log(res)
                        if (this.selectedLabel=='男方') {
                            this.male = this.male.concat(res.data.data);
                            this.pageOne++;
                        } else {
                            this.female = this.female.concat(res.data.data);
                            this.pageTwo++;
                        }
                        this.$nextTick(() => {
                            (this as any).$refs[this.selectedLabel=='男方'?'maleScroll':'femaleScroll'].refresh();
                            (this as any).$refs[this.selectedLabel=='男方'?'maleScroll':'femaleScroll'].forceUpdate();
                        });
                    } else if (res.data.data == []) {
                        (this as any).$refs[this.selectedLabel=='男方'?'maleScroll':'femaleScroll'].forceUpdate();
                    }
                }
            });
        }

        private back(): void {
            this.isKeepAlive=true;
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.isKeepAlive=false;
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private async getGroups():Promise<any>{
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            try {
                const male=await Http.get(this.api.getMyMaleSingleList, {page:this.pageOne,size:10}, {token: this.user.token});
                const female=await Http.get(this.api.getMyFemaleSingleList, {page:this.pageTwo,size:10}, {token: this.user.token});
                if(male.code==1 && female.code==1){
                    loadToast.hide();
                    this.male=male.data.data;
                    this.female=female.data.data;
                    this.maleNum=male.data.total;
                    this.femaleNum=female.data.total;
                    this.pageOne++;
                    this.pageTwo++;
                }else{
                    loadToast.hide();
                    this.globalMultipleResultToast(male,female);
                }
            }catch (e) {
                loadToast.hide();
                console.log(e);
            }
        }

        private activated(){
            if(this.isKeepAlive){
                this.pageOne=1;
                this.pageTwo=1;
                this.getGroups();
            }
        }

        private mounted(): void {
            //this.getGroups();
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        overflow hidden;
        background $theme-page-common-background-color;

        .box
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - var(--safe-area-inset-top) - 47px);
            &::before
                display table;
                content '';

            .all-top
                background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
                width 100vw;
                height 160px;
                &::before
                    display table;
                    content '';
                .total
                    position relative;
                    width 80vw;
                    height 100px;
                    margin 30px auto;
                    background-color #fff;
                    border-radius 300px;
                    align-items center;
                    text-align center;
                    justify-content: center;
                    &::after
                        display block;
                        content '';
                        width 2px;
                        border-left 2px solid $theme-common-color;
                        height 80px;
                        position absolute;
                        top 10px;
                        left calc(50% - 1px);

                    .tip
                        font-size 24px;
                    .people-total,.income-total
                        width 50%;
                        .num
                            color $theme-common-color;
                            margin-top 8px;
                            font-size 16px;
                            word-break break-word;

            .all-bottom
                background-color #fff;
                height calc(100vh - 160px - 47px);
                padding-bottom var(--safe-area-inset-bottom);
                .content-box
                    height 100%;

                    .tab-slide-container
                        position: fixed;
                        top: calc(47px + 160px + 45px + var(--safe-area-inset-top));
                        left: 0;
                        right: 0;
                        bottom: 0;

                    >>>.cube-tab-bar
                        padding 8px 0;
                        border-bottom 1px solid $theme-line-color;

                    .none-fans
                        padding-top 50px;
                        padding-bottom calc(100vh - 160px - 47px - 44px - 50px - 15px);
                        text-align center;

                    .scroll
                        .list-wrapper
                            .list-item
                                margin 10px 7px;
                                padding-bottom 10px;
                                justify-content: space-around;
                                align-items center;
                                border-bottom 1px solid $theme-line-color;

                                .avatar
                                    width 70px;
                                    height 70px;
                                    border-radius 50%;
                                    position relative;

                                    img
                                        width 70px;
                                        height 70px;
                                        border-radius 50%;

                                .info
                                    width calc(100vw - 85px - 14px - 30px);
                                    line-height 24px;

                                    .nickname
                                        svg
                                            font-size 20px;

                                    .factor
                                        span
                                            padding 0 5px;
                                            border-right 1px solid $theme-line-color;
                                            &:last-child
                                                border-right none;
                                            &:first-child
                                                padding-left 0;
                                    .hobby
                                        span
                                            padding 0 5px;
                                            &:last-child
                                                border-right none;
                                            &:first-child
                                                padding-left 0;

                                    .rank
                                        color $theme-viceColor-font;

                                        svg
                                            font-size 18px;

                                    .intro
                                        color $theme-viceColor-font;



</style>
